<template>
    <div class="r-container">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="admin"></icon>
                    管理员管理
                </h2>
                <p>
                    <icon name="tips" class="text-danger"></icon>
                    管理员权限分配，请谨慎操作！
                </p>
            </div>
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="'/'">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>管理员</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容容器 -->
        <div class="container">
            <div class="block">
                <div class="block-content">
                    <div class="block-option">
                        <el-row>
                            <!-- 搜索 -->
                            <el-col :span="8">
                                <el-input v-model="params.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="用户名/手机号码"
                                          clearable
                                          :disabled="operate.searchLoading"
                                          @keyup.enter.native="handleSearch">
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="operate.searchLoading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <!-- 操作按钮 -->
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-plus"
                                               @click="openDialogBox">创建
                                    </el-button>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-circle-check"
                                               @click="handleSetLock(0)">启用
                                    </el-button>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-lock"
                                               @click="handleSetLock(1)">锁定
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              highlight-current-row
                              :stripe="true"
                              :data="adminUsers"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor"
                              @selection-change="handleSelectionChange">

                        <el-table-column fixed type="selection" width="42" align="center"></el-table-column>

                        <el-table-column label="超级" width="60" align="center">
                            <template slot-scope="item">
                                <el-tag :type="item.row.is_super ? 'success' : 'info'"
                                        size="mini"
                                        :effect="item.row.is_super ? 'dark' : 'plain'">
                                    {{ item.row.is_super ? '是' : '否' }}
                                </el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column label="用户名">
                            <template slot-scope="item">
                                <strong>{{ item.row.username }}</strong>
                                <div>
                                    <el-tag v-for="(role, index) in item.row.role_have"
                                            :key="index"
                                            effect="plain"
                                            size="mini"
                                            class="mr-5">{{ role.name }}
                                    </el-tag>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="手机号" width="120">
                            <template slot-scope="item">
                                {{ item.row.mobile }}
                            </template>
                        </el-table-column>

                        <el-table-column label="描述">
                            <template slot-scope="item">
                                <span class="el-d">{{ item.row.description }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="锁定" width="70" align="center">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        :type="item.row.is_lock === 0 ? 'success' : 'danger'">
                                    {{ item.row.is_lock_label }}
                                </el-tag>
                            </template>
                        </el-table-column>

                        <!--                        <el-table-column label="删除" width="70" align="center">-->
                        <!--                            <template slot-scope="item">-->
                        <!--                                <el-tag size="small"-->
                        <!--                                        :effect="item.row.is_delete === 1 ? 'dark' : 'light'"-->
                        <!--                                        :type="item.row.is_delete === 0 ? 'success' : 'info'">-->
                        <!--                                    {{ item.row.is_delete_label }}-->
                        <!--                                </el-tag>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->

                        <el-table-column fixed="right" label="操作" width="120" align="center">
                            <template slot-scope="item">
                                <el-button-group class="r-button-group">
                                    <el-button type="warning"
                                               size="mini"
                                               icon="el-icon-edit"
                                               @click="editDialogBox(item)">
                                    </el-button>
                                    <!--                                    <el-button type="success"-->
                                    <!--                                               size="mini"-->
                                    <!--                                               icon="rc-icon rc-icon-back-line"-->
                                    <!--                                               @click="confirmUndelete(item)"></el-button>-->
                                    <el-popconfirm icon="el-icon-info"
                                                   icon-color="red"
                                                   title="确定锁定该管理员吗？"
                                                   confirm-button-text="确定"
                                                   cancel-button-text="取消"
                                                   @confirm="handleRowLock(item)">
                                        <el-button type="danger"
                                                   size="mini"
                                                   slot="reference"
                                                   icon="el-icon-lock"></el-button>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import baseMixins from '@/mixins/base'
import DialogBoxMixins from '@/mixins/dialog'
import AuthMixins from '@/mixins/cms/auth'

import { isEmpty, errorMessage, successMessage, loading } from '@/utils'

import Create from '@/views/cms/admin/admin-user/Create.vue'
import Edit from '@/views/cms/admin/admin-user/Edit.vue'

const module = namespace('cms/adminUser')

@Component({
  components: {
    Create,
    Edit
  }
})

export default class Index extends mixins(baseMixins, DialogBoxMixins, AuthMixins) {
  // Vuex
  @module.State adminUsers!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action setLock!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>
  @module.Action destroy!: (payload: any) => Promise<any>
  @module.Action undelete!: (payload: any) => Promise<any>

  // 操作组
  private operate: any = {
    loading: false,
    searchLoading: false
  }

  /*----- 钩子 -----*/
  public created() {
    if (!this.adminUsers.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @private
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @return Promise<any>
   */
  private getQuery(): Promise<any> {
    this.table.loading = true
    const params: any = {
      ...this.params,
      per_page: this.table.perPage,
      page: this.table.currentPage
    }
    return this.query({ params }).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.operate.searchLoading = true
    this.getQuery().then(res => {
      this.operate.searchLoading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理选择
   *
   * @param selection
   * @return {void}
   */
  // private handleSelectionChange(selection: Array<any>): void {
  //   this.ids = []
  //   selection.forEach(item => {
  //     this.ids.push(item.id)
  //   })
  // }

  /**
   * 处理锁定/解锁
   *
   * @param status
   * @return {void}
   */
  private handleSetLock(status: number): void {
    if (!isEmpty(this.ids) && (status === 0 || status === 1)) {
      this.table.loading = true
      this.setLock({ status, param: { ids: this.ids } }).then((res) => {
        if (res.status === 200) {
          this.cancelSelection()  // 取消选择
          successMessage(res.message)
        } else {
          errorMessage(res.message)
        }
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
    }
  }

  /**
   * 锁定
   *
   * @param item
   * @return {void}
   */
  private handleRowLock(item: any): void {
    if (item.row.is_lock === 0) {
      this.cancelSelection() // 取消选择

      this.setLock({ status: 1, param: { ids: [item.row.id] } }).then((res) => {
        res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
    }
  }

  /**
   * 编辑
   *
   * @param item
   * @return {void}
   */
  private editDialogBox(item: any): void {
    const _loading = loading({ background: 'transparent' })
    this.show({ id: item.row.id }).then((res) => {
      if (res.status === 200) {
        this.dialogBox.component = 'Edit'
        this.$nextTick(() => {
          this.dialogBox.visible = true
          this.dialogBox.index = item.$index
        })
      }
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 删除
   *
   * @param item
   * @private
   */
  // private confirmDelete(item: any) {
  //   this.table.loading = true
  //   this.destroy({id: item.row.id, index: item.$index}).then((res) => {
  //     this.table.loading = false
  //     res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
  //   }).catch((err) => {
  //     this.table.loading = false
  //   })
  // }

  /**
   * 恢复删除
   *
   * @return {void}
   */
  private confirmUndelete(item: any): void {
    this.$alert('确定恢复该管理员！', '提示', {
      type: 'info',
      confirmButtonText: '确定恢复',
      callback: (action: string) => {
        this.table.loading = true
        this.undelete({ id: item.row.id, index: item.$index }).then((res) => {
          this.table.loading = false
          res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
        }).catch((err) => {
          this.table.loading = false
        })
      }
    })
    // this.$confirm('确定恢复该管理员！', '恢复管理员', {
    //   type: 'info',
    //   cancelButtonText: '',
    //   confirmButtonText: '确定恢复',
    //   confirmButtonClass: 'el-button--success font-s14'
    // })
  }

  /**
   * 取消选择
   *
   * @return {void}
   */
  private cancelSelection(): void {
    (this.$refs.dataList as any).clearSelection();
  }
}
</script>

<style lang="scss">

</style>
